<template>
    <div class="customer-addDoc">
        <div style="text-align:right;margin-bottom:5px">
            <Button type="primary" @click="customerAdd">保存</Button>
            <Button ghost type="primary">返回</Button>
        </div>
        <div class="table">
            <h4><span>基础信息</span></h4>
            <Row class="block">
                <Col class="line" span="6">
                    <div class="list"><label for="">姓名:</label><span><Input v-model="customerName" placeholder="" /></span></div>
                    <div class="list"><label for="">手机号码:</label><span><Input v-model="mobile" placeholder="" /></span></div>
                    <div class="list"><label for="">身高:</label><span><Input placeholder="" /></span> </div>
                    <div class="list"><label for="">患者类型:</label>
                        <Select class="select" placeholder="选择患者类型">
                            <Option  class="select" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </div>
                    
                </Col>
                <Col class="line" span="6">
                    <div class="list"><label for="">性别:</label>
                        <span class="radio ivu-input">
                            <RadioGroup class="sex" v-model.number="sex">
                                <Radio :label="1">男</Radio>
                                <Radio :label="2">女</Radio>
                            </RadioGroup>
                        </span>
                    </div>
                    <div class="list"><label for="">身份证号:</label><span><Input v-model="customerInfo.idCard" type="number" :maxlength="16" placeholder="" /></span> </div>
                    <div class="list"><label for="">体重:</label><span><Input v-model="customerInfo.weight" type="number" :maxlength="5" placeholder="" /></span> </div>
                    <div class="list">
                        <label for="">并发症:</label>
                        <Select class="select" v-model="customerInfo.complication" placeholder="选择患者类型">
                            <Option  class="select" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </div>
                </Col>
                <Col class="line" span="6">
                    <div class="list"><label for="">出生日期:</label><span><Input v-model="birthday" placeholder="" /></span> </div>
                    <div class="list"><label for="">联系人:</label><span><Input placeholder="" /></span> </div>
                    <div class="list marry">
                        <label for="">婚姻状态:</label>
                        <span>
                            <!-- <Input v-model.number="customerInfo.marryFlag" placeholder="" /> -->
                            <RadioGroup v-model.number="customerInfo.marryFlag">
                                <Radio :label="0">未婚</Radio>
                                <Radio :label="1">已婚</Radio>
                            </RadioGroup>
                        </span>
                    </div>
                    <div class="list"><label for="">确诊年份:</label><span><Input v-model="customerInfo.careTime" placeholder="" /></span> </div>
                </Col>
                <Col class="line" span="6">
                    <div class="list"><label for="">年龄:</label><span><Input placeholder="" /></span> </div>
                    <div class="list"><label for="">联系电话:</label><span><Input v-model="customerInfo.contactPhone" :maxlength="12" placeholder="" /></span> </div>
                    <div class="list"><label for="">职业:</label><span><Input v-model="customerInfo.profession" placeholder="" /></span> </div>
                    <div class="list"><label for="">会员卡号:</label><span><Input v-model="customerInfo.vipNumber" placeholder="" /></span> </div>
                </Col>
            </Row>
            <Row class="block">
                <Col class="line" span="12">
                    <div class="list"><label for="">所在地址:</label>
                        <Select class="select" v-model="customerInfo.province" placeholder="请选择省/自治区">
                            <Option  class="select" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Select class="select ml5" v-model="customerInfo.city" placeholder="请选择市">
                            <Option  class="select" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Select class="select ml5" v-model="customerInfo.district" placeholder="请选择县区">
                            <Option  class="select" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </div>
                </Col>
                <Col class="line" span="12">
                    <div class="list">
                        <label for="">详细住址:</label>
                        <Input v-model="customerInfo.address" placeholder="" />
                    </div>
                </Col>
            </Row>
            <Row class="block">
                <Col class="line" span="12">
                <!-- tagList -->
                    <div class="list"><label for="">患者标签:</label>
                       <Select class="select ml5" v-model="tagList" placeholder="请选择患者标签">
                            <Option  class="select" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </div>
                </Col>
                <Col class="line" span="12">
                  
                </Col>
            </Row>
        </div>
        <div class="table">
            <h4><span>健康信息</span></h4>
            <Row class="block">
                <Col class="line" span="12">
                    <div class="list"><label for="">疾病史:</label>
                        <strong>
                            <RadioGroup v-model="customerHistory.diseaseHistory">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </strong>
                        <span class="mr10"><Input placeholder="" /></span> 

                    </div>
                    <div class="list"><label for="">现病史:</label>
                        <strong>
                            <RadioGroup v-model="customerHistory.nowHistory">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </strong>
                        <span class="mr10"><Input placeholder="" /></span> 
                    </div>
                    <div class="list"><label for="">过敏史:</label>
                        <strong>
                            <RadioGroup v-model="customerHistory.allergyHistory">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </strong>
                        <span class="mr10"><Input placeholder="" /></span> 
                    </div>
                </Col>
                <Col class="line" span="12">
                    <div class="list"><label for="">家族史:</label>
                        <strong>
                            <RadioGroup v-model="customerHistory.familyHistory">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </strong>
                        <span><Input placeholder="" /></span> 

                    </div>
                    <div class="list"><label for="">现在治疗方式:</label>
                        <strong>
                            <RadioGroup v-model="customerHistory.nowTreatment">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </strong>
                        <span><Input placeholder="" /></span> 
                    </div>
                    <div class="list"><label for="">过去治疗方式:</label>
                        <strong>
                            <RadioGroup v-model="customerHistory.passTreatment">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </strong>
                        <span><Input placeholder="" /></span> 
                    </div>
                </Col>
            </Row>
        </div>
        <div class="table">
            <h4><span>生活习惯</span></h4>
            <Row class="block">
                <Col class="line" span="12">
                    <div class="list">
                        <label for="">劳动强度:</label>
                        <span class="radio ivu-input">
                            <RadioGroup v-model="customerHabit.labor">
                                <Radio label="重度"></Radio>
                                <Radio label="中度"></Radio>
                                <Radio label="轻度"></Radio>
                                <Radio label="卧床休息"></Radio>
                            </RadioGroup>
                        </span>
                    </div>
                </col>
                <Col class="line" span="12">
                    <div class="list">
                        <label for="">锻炼情况:</label>
                        <span class="radio ivu-input">
                            <RadioGroup v-model="customerHabit.labor">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </span>
                    </div>
                </col>
            </Row>
            <Row class="block">
                <Col class="line" span="12">
                    <div class="list">
                        <label for="">抽烟情况:</label>
                        <span class="radio ivu-input">
                            <RadioGroup v-model="customerHabit.smoke">
                                <Radio label="有" />
                                <Radio label="无" />
                            </RadioGroup>
                        </span>
                        <span>抽烟频率</span>
                        <span><Input v-model="customerHabit.smokeRate" placeholder="" /></span>
                        <span class="ml5">支/天</span>
                    </div>
                </col>
                <Col class="line block" span="12">
                    <div class="list">
                        <label for="">饮酒情况:</label>
                        <span class="flex2 radio ivu-input">
                            <RadioGroup class="drink" v-model="customerHabit.drink">
                                <Radio label="有" />
                                <Radio label="无" />
                                <Radio label="偶尔" />
                            </RadioGroup>
                        </span>
                        <span>饮酒频率</span>
                        <span><Input v-model="customerHabit.drinkRate" placeholder="" /></span>
                        <span class="ml5">杯/天</span>
                    </div>
                </col>
            </Row>
        </div>
        <div class="table">
            <h4><span>家庭成员</span></h4>
            <Row class="family">
                <Col class="line block" span="14">
                    <Row class="list">
                        <Col span="8">关系</Col>
                        <Col span="8">姓名</Col>
                        <Col span="8">联系电话</Col>
                    </Row>
                </col>
                <Col class="line block" span="10">
                    <Row class="list">
                        <Col span="20">备注</Col>
                        <Col span="4">操作</Col>
                    </Row>
                </col>
            </Row>
            
            <Row class="block">
                <Col class="line block" span="14">
                    <Row class="list" v-for="(line,j) in customerFamilyList" :key="j">
                        <Col span="8"  class="pr10">
                            <Select class="select" placeholder="父亲" v-model="line['relationship']">
                                <Option  class="select" v-for="item in family" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </Col>
                        <Col span="8"  class="pr10">
                            <Input v-model="line['familyName']" placeholder="请输入姓名" />
                        </Col>
                        <Col span="8"  class="pr10">
                            <Input type="numbber" :maxlength="11" v-model="line['familyMobile']" placeholder="请输入联系电话" />
                        </Col>
                    </Row>
                </col>
                <Col class="line block" span="10" >
                    <Row class="list" v-for="(line,j) in customerFamilyList" :key="j">
                        <Col span="20" class="pr10">
                            <Input v-model="line['familyRemark']" placeholder="请输入备注信息"  />
                        </Col>
                        <Col span="4" class="">
                            <span @click="removeCustomerFamily(j)">删除</span>
                        </Col>
                    </Row>
                </col>
            </Row>
            <Row >
                <Col span="24">
                    <Button class="btn" type="dashed" icon="ios-search" @click="addCustomerFamily">新增成员</Button>
                </col>
            </Row>
        </div>

        <div class="table">
            <h4><span>备注说明</span></h4>
            <Row class="block">
                <Col class="line" span="24">
                    <Input maxlength="300" v-model="customerInfo.remark" show-word-limit type="textarea" placeholder="请输入备注..." />
                </Col>
            </Row>
        </div>
        
    </div>
</template>
<script>
import { customerAdd, customerPageQueryList, customerPageQueryInterventionList, customerUpdateInfo, customerPageQueryFollowList, customerGet, customerUpdateHistory, customerUpdateHabit, customerUpdateFamily } from '@api/customer.js'
export default {
    data() {
        return {
            family:[
                    {
                        value: '',
                        label: '父亲'
                    },
                    {
                        value: '',
                        label: '母亲'
                    },
                    {
                        value: '',
                        label: '兄弟'
                    },
                    {
                        value: '',
                        label: '姐妹'
                    },
            ],
            cityList: [
                {
                    value: '',
                    label: ''
                },
                {
                    value: 'New York',
                    label: 'New York'
                },
                {
                    value: 'London',
                    label: 'London'
                },
                {
                    value: 'Sydney',
                    label: 'Sydney'
                },
                {
                    value: 'Ottawa',
                    label: 'Ottawa'
                },
                {
                    value: 'Paris',
                    label: 'Paris'
                },
                {
                    value: 'Canberra',
                    label: 'Canberra'
                }
            ],

            customerName: '',
            mobile: '',
            sex: '', 
            birthday: '',
            headimgurl: '',
            customerInfo: {
                idCard: '',
                contactPerson: '',
                contactPhone: '',
                height: '',
                weight: '',
                marryFlag:'0',//是否已婚，0：不是，1：是
                profession: '',
                diseaseType: '',
                complication:'',
                careTime: '',
                vipNumber: '',
                province: '',
                provinceId: '',
                city: '',
                cityId: '',
                district:'',
                districtId: '',
                address: '',
                remark: '', //必须
            },
            tagList: [],
            customerHistory: { //健康信息
                diseaseHistory: '',
                nowHistory:'',
                allergyHistory: '',
                familyHistory: '',
                nowTreatment: '',
                passTreatment: '',
            },
            customerHabit: {
                labor: '',
                smoke: '',
                smokeRate: '',
                drink: '',
                drinkRate: '',
                exercise: '',
            },
            customerFamilyList: [
                {
                    relationship: '',
                    familyName: '',
                    familyMobile: '',
                    familyRemark: '',
                }
            ],
            addLoading: false,
        }
    },
    methods: {
        customerAdd() {
            const {addLoading, customerName,mobile,sex, birthday,headimgurl, customerInfo,tagList,customerHistory,customerHabit, customerFamilyList,} = this;
            addLoading || (this.addLoading = true)
            customerAdd({}).then(res => {
                if (res.code === 0) {
                    this.$Modal.success({
                        title: '建档',
                        content: '建档成功'
                    })
                } else {
                    this.$Modal.warning({
                        title: '建档',
                        content: err.errMsg
                    })
                }
                this.addLoading = false;
                
            }).catch(err => {
                this.addLoading = false;
                this.$Modal.success({
                    title: '建档',
                    content: err.errMsg
                })
            })
        },
        removeCustomerFamily(j){
            this.customerFamilyList.splice(j,1)
            this.customerFamilyList = [...this.customerFamilyList]
        },
        addCustomerFamily() {
            this.customerFamilyList.push({
                relationship: '',
                familyName: '',
                familyMobile: '',
                familyRemark: '',
            })
            this.customerFamilyList = [...this.customerFamilyList]
        }
    }
}
</script>
<style lang="scss">
.customer-addDoc{
    .drink,.sex{
        white-space: nowrap;
    }
    
    background-color: #fff;
    .pr10{
        padding-right: 10px;
    }
    .ml5{
        margin-left: 5px;
    }
    .mr10{
        margin-right: 10px;
    }
    .select{
            width: 100%;
            >div{
                width: 100%;
            }
        }
        h4{
            font-size: 14px;
            font-weight: normal;
            span{
                position: relative;
                top: -22px;
                background-color: #fff;
                padding-left: 10px;
                padding-right: 10px;
            }
        }
        .table{
            margin-bottom: 30px;
            border: 1px solid #e3e8ee;
            padding: 10px;
        }
        .block{
            .list{
                display: flex;
                line-height: 1.8em;
                align-items: center;
                margin-bottom: 15px;
                >label{
                    min-width: 90px;
                    text-align: right;
                    margin-right: 10px;
                    white-space: nowrap;
                    overflow: hidden;
                }
                span{
                    flex: 1;
                }
                .flex2{
                    flex: 2;
                }
            }
            .radio{
                border-color: transparent;
                background-color: transparent;
            }
            .marry{
                line-height: 30px;
            }
        
        
    }
    .family{
        .list{
            margin-bottom: 0;
            background-color: #F8F8F9;
            line-height: 40px;
        }
    }
    .btn{
        width: 100%;
    }
}
    
</style>